<template>
  <div class="pages-content" v-loading="Loading">
    <div class="operation">
      <h2>{{moment(month).format('YYYY年MM月')}}产品分地市收入趋势：分产品收入情况</h2>
      <img class="logoBg" src="~@/assets/images/common/fiveG.png" alt="" />
    </div>
    <div class="pages-content-tips">
      <div class="echarts-block" v-for="(item, idx) in echartsArray" :key="idx">
        <div class="echarts-title">
          <span>{{ item.indexName }}</span>
        </div>
        <div class="echarts-canvas">
          <bar-line-canvas :echartsObj="item.CanvasData"></bar-line-canvas>
        </div>
        <div class="lackData">
          <span class="title">同比:</span>
          <ul class="gapOfTitle">
            <li v-for="(i, x) in item.tbRate" :style="{ width: widthChangeArray[idx] + 'px' }" :key="x">
              {{ i }}
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { $budgetAPI } from "@/api";

import barLineCanvas from "./barLineCanvas";

export default {
  components: {
    barLineCanvas,
  },
  data() {
    return {
      Loading: false,
      echartsArray: [],
      widthChangeArray: [],
      month: "",
    };
  },
  methods: {
    init(month) {
      this.Loading = true;
      this.month = month;
      $budgetAPI.listCloudStandardThree(
        {
          month,
        },
        (res) => {
          if (res.content.length > 1) {
            this.echartsArray = res.content.map((item) => {
              let dataObj = {
                indexName: item.indexName,
                CanvasData: {
                  xdata: item.areaNames,
                  barData: item.thisYearLjIncome,
                  lineData: item.completeRate.map((i) => parseFloat(i)),
                },
                tbRate: item.tbIncrease,
              };

              return dataObj;
            });
            this.Loading = false;

            this.setWidth();
          } else {
            this.echartsArray = [];
            this.Loading = false;
          }
        }
      );
    },

    async setWidth() {
      await this.$nextTick();
      let elWidth = document.querySelector(".gapOfTitle").clientWidth;
      this.echartsArray.forEach((i) => {
        let width = (elWidth - 20) / i.tbRate.length;
        this.widthChangeArray.push(width);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.pages-content {
  border: 1px solid #dee5f3;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 20px;

  .operation {
    font-size: 16px;
    padding-bottom: 10px;
    position: relative;

    h2 {
      color: #fff;
      display: inline-block;
      background: #2f6eba;
      border-radius: 20px;
      padding: 5px 20px;
    }

    img {
      position: absolute;
      right: 20px;
      top: 0px;
    }
  }
}

.pages-content-tips {
  display: flex;
  flex-wrap: wrap;
  display: flex;

  padding-bottom: 20px;

  .echarts-block {
    flex-basis: 49%;
    min-height: 200px;
    background: #f8f8fa;
    border-radius: 10px;
    margin: calc(1.8% / 4);

    .echarts-title {
      font-size: 16px;
      font-weight: 500;
      padding: 10px 20px 0 30px;

      > span {
        position: relative;

        &::after {
          content: "";
          position: absolute;
          left: -10px;
          top: 50%;
          width: 4px;
          height: 70%;
          background: #2d6ab2;
          transform: translateY(-50%);
        }
      }
    }

    .echarts-canvas {
      height: 150px;
    }

    .lackData {
      // width: 100%;
      display: flex;
      align-items: center;
      // margin-bottom: 20px;
      // padding: 0 0px 0 55px;

      .title {
        width: 65px;
        text-align: center;
      }

      .gapOfTitle {
        display: inline-block;
        width: 100%;

        li {
          float: left;
          border: 1px solid #5585bf;
          border-right-width: 0;
          color: #5585bf;
          text-align: center;
          height: 18px;
          line-height: 18px;

          &:last-child {
            border-right-width: 1px;
          }
        }
      }
    }
  }
}
</style>
